<template>
	<div class="wrapper">
		<header>
			<div class="go-back"><i class="fa fa-reply" @click="goback"></i></div>
			<p>订单评论</p>
		</header>

		<div class="evaluation-container">
			<h1 class="title">您对骑手满意吗？</h1>

			<div class="rating-options">
				<button class="rating-btn unsatisfied" :class="{ active: satisfaction === 'unsatisfied' }" @click="selectSatisfaction('unsatisfied')">
					<span class="emoji">😞</span>
					<span>不满意</span>
				</button>
				<button class="rating-btn satisfied" :class="{ active: satisfaction === 'satisfied' }" @click="selectSatisfaction('satisfied')">
					<span class="emoji">😊</span>
					<span>满意</span>
				</button>
			</div>

			<div class="tags-container" v-if="satisfaction">
				<span v-for="(tag, index) in currentTags" :key="index" class="tag" :class="{ selected: selectedTags.includes(tag) }"
				 @click="toggleTag(tag)">
					{{ tag }}
				</span>
			</div>
		</div>

		<div class="CommentInfo">
			<h1 class="title">您对商家/菜品满意吗？</h1>
			<div class="star-rating-container">
				<div class="star-rating">
					<span v-for="(star, index) in stars" :key="index" @click="rate(index + 1)" @mouseover="hoverRating = index + 1"
					 @mouseleave="hoverRating = 0" :class="{
		        'star': true,
		        'active': (hoverRating || currentRating) >= index + 1,
		        'inactive': (hoverRating || currentRating) < index + 1
		      }">
						★
					</span>
				</div>
				<div class="rating-text">
					{{ ratingTexts[currentRating - 1] || '综合评价' }}
				</div>
			</div>

			<div class="comment-section">
				<textarea v-model="commmentContent" placeholder="请输入您的评价..." rows="4" class="comment-input"></textarea>
			</div>

			<div class="anonymous-section">
				<label class="anonymous-checkbox">
					<input type="checkbox" v-model="isAnonymous" class="checkbox-input">
					<span class="checkmark"></span>
					匿名评价
				</label>
				<span class="anonymous-tip">(选择后您的用户名将不会显示)</span>
			</div>

			<button class="submit-button" :disabled="!canSubmit" @click="submit">
				提交评价
			</button>
		</div>
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	const satisfaction = ref(null)

	// 不同满意度对应的不同标签
	const tags = {
		satisfied: [
			'仪表整洁',
			'风雨无阻',
			'货品完好',
			'快速准时',
			'礼貌热情'
		],
		unsatisfied: [
			'配送超时',
			'态度不好',
			'货品损坏',
			'仪表不整',
			'沟通不畅'
		]
	}

	const selectedTags = ref([])

	// 当前显示的标签
	const currentTags = computed(() => {
		return satisfaction.value ? tags[satisfaction.value] : []
	})

	const selectSatisfaction = (type) => {
		satisfaction.value = type
		selectedTags.value = [] // 切换满意度时清空已选标签
	}

	const toggleTag = (tag) => {
		const index = selectedTags.value.indexOf(tag)
		if (index === -1) {
			selectedTags.value.push(tag)
		} else {
			selectedTags.value.splice(index, 1)
		}
	}
</script>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'CommentCreate',
		data() {
			return {
				user: {},
				orderId: this.$route.query.orderId,
				businessId: this.$route.query.businessId,
				currentRating: 0,
				hoverRating: 0,
				commmentContent: '',
				isAnonymous: 0,
				stars: [1, 2, 3, 4, 5],
				ratingTexts: [
					'迟早得凉',
					'较差',
					'一般',
					'推荐',
					'强烈推荐'
				],
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
		},
		computed: {
			canSubmit() {
				return this.currentRating > 0 && this.commmentContent.trim().length > 0;
			}
		},
		methods: {
			rate(rating) {
				this.currentRating = rating;
				this.$emit('rating-changed', {
					rating: rating,
					text: this.ratingTexts[rating - 1]
				});
			},
			submit() {
				let url =
					`CommentController/createComment/${this.user.userId}/${this.businessId}/${this.orderId}/${this.commmentContent}/${this.currentRating}/${this.isAnonymous}`;
				this.$axios.post(url).then((response) => {
						if (response.data.result == 1) {
							this.$router.push({
								path: '/index'
							});
						}
					})
					.catch((error) => {
						console.error(error);
					});
			},
			goback() {
				this.$router.go(-1);
			},
		},
		components: {
			Footer
		},
	}
</script>


<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		/*justify-content: center;*/
		align-items: center;
	}

	.wrapper header .go-back {
		padding: 0 32vw 0 2vw;
	}

	.wrapper .CommentInfo .star-rating-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.wrapper .CommentInfo .star-rating-container .star-rating {
		display: flex;
		align-items: center;
		font-size: 0;
	}

	.star {
		font-size: 32px;
		cursor: pointer;
		transition: color 0.2s;
		margin-right: 5px;
	}

	.star.active {
		color: #ffcc00;
		/* 亮色星星 */
	}

	.star.inactive {
		color: #ccc;
		/* 暗色星星 */
	}

	.wrapper .CommentInfo .star-rating-container .rating-text {
		font-size: 16px;
		color: #666;
		min-height: 20px;
		text-align: center;
	}

	.comment-section {
		margin-top: 15vw;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.comment-input {
		width: 80%;
		padding: 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		resize: vertical;
		font-size: 14px;
		transition: border-color 0.3s;
	}

	.comment-input:focus {
		outline: none;
		border-color: #ffcc00;
	}

	.submit-button {
		width: 80%;
		margin-left: 9%;
		padding: 12px;
		background-color: #ffcc00;
		color: #333;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.submit-button:hover {
		background-color: #e6b800;
	}

	.submit-button:disabled {
		background-color: #ddd;
		color: #999;
		cursor: not-allowed;
	}

	.anonymous-section {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		margin-left: 10px;
		font-size: 14px;
	}

	.anonymous-checkbox {
		display: flex;
		align-items: center;
		cursor: pointer;
		position: relative;
		padding-left: 25px;
		margin-right: 8px;
	}

	.checkbox-input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
	}

	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 18px;
		width: 18px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 25vw;
	}

	.anonymous-checkbox:hover .checkbox-input~.checkmark {
		background-color: #f5f5f5;
	}

	.checkbox-input:checked~.checkmark {
		background-color: #ffcc00;
		border-color: #ffcc00;
	}

	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}

	.checkbox-input:checked~.checkmark:after {
		display: block;
	}

	.anonymous-checkbox .checkmark:after {
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}

	.anonymous-tip {
		color: #999;
		font-size: 12px;
	}





	.evaluation-container {
		max-width: 500px;
		margin-top: 12vw;
		margin-bottom: 4vw;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		background-color: white;
		/* 白色背景 */
		border-radius: 10px;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	}

	.title {
		text-align: center;
		font-size: 20px;
		color: #333;
		margin-bottom: 30px;
	}

	.rating-options {
		display: flex;
		justify-content: center;
		gap: 30px;
		margin-bottom: 40px;
	}

	.rating-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px 25px;
		border-radius: 10px;
		font-size: 16px;
		border: 1px solid #ddd;
		background-color: #f5f5f5;
		/* 灰色按钮背景 */
		cursor: pointer;
		transition: all 0.3s;
	}

	.rating-btn .emoji {
		font-size: 24px;
		margin-bottom: 5px;
		opacity: 0.5;
		transition: all 0.3s;
	}

	.rating-btn.active {
		background-color: white;
		/* 选中时按钮背景变白 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.rating-btn.active .emoji {
		opacity: 1;
		transform: scale(1.2);
	}

	.rating-btn.unsatisfied.active {
		border-color: #ff9800;
	}

	.rating-btn.unsatisfied.active .emoji {
		color: #ff9800;
	}

	.rating-btn.satisfied.active {
		border-color: #4caf50;
	}

	.rating-btn.satisfied.active .emoji {
		color: #4caf50;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		margin-bottom: 30px;
	}

	.tag {
		padding: 8px 15px;
		background-color: #f5f5f5;
		/* 灰色标签背景 */
		border-radius: 15px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.tag.selected {
		background-color: #2196f3;
		color: white;
	}

	.tag:hover {
		transform: translateY(-2px);
	}

	.submit-btn {
		display: block;
		width: 100%;
		padding: 12px;
		background-color: #757575;
		/* 深灰色提交按钮 */
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.submit-btn:disabled {
		background-color: #e0e0e0;
		cursor: not-allowed;
		opacity: 0.7;
	}

	.submit-btn:not(:disabled):hover {
		background-color: #616161;
		transform: translateY(-2px);
	}
</style>
